<!--
 * @Author: your name
 * @Date: 2020-05-09 00:38:07
 * @LastEditTime: 2021-07-07 16:51:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \MWZ_MIS\src\components\DateInput.vue
 -->
<template>
  <q-input
    :class="'date-' + field.name"
    v-model="formatTime"
    filled
    :mask="field.time ? 'datetime' : 'date'"
    :label="field.label"
    :rules="field.rules ? field.rules : field.value ? (field.time ? ['datetime'] : ['date']) : null"
    :readonly="field.readonly"
    bottom-slots
    ref="input"
  >
    <template v-slot:prepend v-if="!field.readonly && field.time">
      <q-icon
        name="event"
        class="cursor-pointer"
      >
        <q-popup-proxy
          ref="qDateProxy"
          transition-show="scale"
          transition-hide="scale"
        >
          <q-date v-model="formatTime" mask="YYYY/MM/DD HH:mm" />
        </q-popup-proxy>
      </q-icon>
    </template>

    <template v-slot:append v-if="!field.readonly">
      <q-icon
        name="event"
        class="cursor-pointer"
        v-if="!field.time"
      >
        <q-popup-proxy
          ref="qDateProxy"
          transition-show="scale"
          transition-hide="scale"
        >
          <q-date v-model="formatTime" />
        </q-popup-proxy>
      </q-icon>

      <q-icon
        name="access_time"
        class="cursor-pointer"
        v-else
      >
        <q-popup-proxy
          ref="qTimeProxy"
          transition-show="scale"
          transition-hide="scale"
        >
          <q-time v-model="formatTime" mask="YYYY/MM/DD HH:mm" @input="timeinput" format24h />
        </q-popup-proxy>
      </q-icon>
    </template>

    <template v-slot:hint v-if="field.hint || field.compare">
      <div class="text-bold text-white bg-yellow-10" style="padding: 1px;" v-if="canShowCompare">
        {{field.compare.label ? field.compare.label + '：' : ''}}{{field.compare.map ? field.compare.map.value : field.compare.value}}
      </div>
      <div v-if="field.hint">{{field.hint}}</div>
    </template>

  </q-input>
</template>
<script>
import { defineComponent } from 'vue';
import { date } from 'quasar';

export default defineComponent({
  name: 'dateInput',
  props: {
    field: {
      type: Object,
      default: () => {}
    },
    modelValue: {
      type: [String, Number],
      default: ''
    }
  },
  emits: ['update:modelValue'],
  data () {
    return {
    }
  },
  methods: {
    // emit (e) {
    //   this.field.value = (new Date(e)).valueOf() / 1000;
    //   this.$refs.qDateProxy.hide();
    //   this.field.time && this.$refs.qTimeProxy.hide();
    // },
    timeinput (value, details) {
      console.log(value);
    }
  },
  computed: {
    formatTime: {
      get () {
        let showValue = '';
        if (!isNaN(this.field.value) && this.field.value !== '' && this.field.value !== null) {
          const value = this.field.value ? this.field.value * 1000 : Date.now();
          if (this.field.time) {
            showValue = date.formatDate(value, 'YYYY/MM/DD HH:mm');
          } else {
            showValue = date.formatDate(value, 'YYYY/MM/DD');
          }
        }

        return showValue;
      },
      set (val) {
        this.field.value = (new Date(val)).valueOf() / 1000;
        this.$refs.qDateProxy.hide();
        this.field.time && this.$refs.qTimeProxy.hide();
        this.$emit('update:modelValue', this.field.value);
      }
    },
    canShowCompare () {
      /*
        compare的值
        compare: {
          label, // 标题
          value, // 对比的值
          always // true-有数据就显示 false-值不同，再显示
        } */
      return this.field.compare && this.field.compare.value !== null && (this.field.compare.always || this.field.compare.value != this.field.value);
    }
  }
});
</script>
